<template>
    <view class="store-detail pd-v-24 pd-b-72">
      
        <view class="store-detail__body overflow-h">
            <u--form
                labelWidth="100"
                labelPosition="left"
                :model="form"
                ref="uForm"
            >
                <view class="border8 pd-l-24 bg-white mr-t-20">
                    <u-form-item
                        label="门店名称"
                        prop="name"
                        borderBottom
                    >
                        <u--input
                            v-model.trim="form.name"
                            border="none"
                            readonly
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请输入门店名称"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                        label="所在地区"
                        prop="birthPlace"
                        borderBottom
                    >
                            <u-input
                                v-model="form.birthPlace"
                                border="none"
                                clearable
                                readonly
                                placeholder="请输入所在地区"
                            ></u-input>
                    </u-form-item>
                    
                    <u-form-item
                        label="详细地址"
                        prop="detailedAddress"
                        borderBottom
                    >
                        <u--input
                            v-model.trim="form.detailedAddress"
                            border="none"
                            readonly
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请输入详细地址"
                        ></u--input>
                    </u-form-item>
                    
                    <u-form-item
                        label="报修电话"
                        prop="repairPhone"
                        borderBottom
                    >
                        <u--input
                            v-model.trim="form.repairPhone"
                            border="none"
                            readonly
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请输入报修电话"
                        ></u--input>
                    </u-form-item>
                </view>


                <view class="border8 pd-v-24 pd-h-24 bg-white mr-t-20">
                    <view class="flex flex-center">
                        <view class="font28 lh-40 color-default bold">
                            门店图片
                        </view>
                    </view>
                    <u-form-item prop="image">
                        <view class="mr-t-16 flex flex-wrap">
                            <template v-if="form.image.length">
                                <view class="flex flex-center flex-j-center border-default border8 position-r mr-r-10 mr-t-10" style="width: 240rpx;height: 240rpx;" v-for="(item,index) in form.image" :key="'hhh'+index">
                                    <image
                                        :src="getFileUrl(item)"
                                        style="width:100%;height:100%;"
                                        mode="aspectFit"
                                        @click="previewImage(item)"
                                    ></image>
                                </view>
                            </template>
                            
                        </view>
                    </u-form-item>
                      
                </view>

                <view class="border8 pd-v-24 bg-white mr-t-20">
                    <view class="flex flex-center">
                        <view class="flex-1">
                            <u-form-item
                                label="电费"
                                prop="chargeFee"
                            >
                                <u--input
                                    v-model.trim="form.chargeFee"
                                    border="none"
                                    readonly
                                    :customStyle="{padding:'12rpx 0'}"
                                    placeholder="请输入电费"
                                ></u--input>
                            </u-form-item>
                        </view>
                        
                        <view class="font28 lh-40 color-default bold">
                            元/度
                        </view>
                    </view>
                      
                      
                </view>

                <view class="border8 pd-v-24 pd-h-24 bg-white mr-t-20">
                    <view class=" font28 lh-28 color-default">
                        服务费
                    </view>
                      
                    <view class="flex mr-t-10 position-r" v-for="(item,index) in form.serviceChargeList" :key="'in'+index">
                        <view class="flex-1">
                            <u-form-item
                                :prop="`serviceChargeList.${index}.startPower`"
                            >
                                <u--input
                                    v-model.trim="item.startPower"
                                    border="none"
                                    type="text"
                                    readonly
                                    :customStyle="{padding:'8rpx 8rpx',background:'#f1f1f1'}"
                                    placeholder="功率"
                                    fontSize="24rpx"
                                    color="#C0C4CC"
                                    inputAlign="center"
                                ></u--input>
                            </u-form-item>
                        </view>
                        <text class="font24 lh-40 color-default pd-v-8 mr-t-32">
                            瓦-
                        </text>
                          
                        <view class="flex-1">
                            <u-form-item
                                :prop="`serviceChargeList.${index}.endPower`"
                            >
                                <u--input
                                    v-model.trim="item.endPower"
                                    border="none"
                                    readonly
                                    :customStyle="{padding:'8rpx 8rpx',background:'#F5F7FA'}"
                                    placeholder="功率"
                                    fontSize="24rpx"
                                    color="f3f3f3"
                                    type="text"
                                    inputAlign="center"
                                ></u--input>
                            </u-form-item>
                        </view>
                        <text class="font24 lh-40 color-default pd-v-8 mr-t-32">
                            瓦
                        </text>
                        <view class="flex-1 mr-l-40">
                            <u-form-item
                                 :prop="`serviceChargeList.${index}.price`"
                            >
                                <u--input
                                    v-model.trim="item.price"
                                    border="none"
                                    readonly
                                    :customStyle="{padding:'8rpx 8rpx',background:'#F5F7FA',color:'#C0C4CC'}"
                                    placeholder="价格(元小时)"
                                    fontSize="24rpx"
                                    color="f3f3f3"
                                    type="digit"
                                    inputAlign="center"
                                ></u--input>
                            </u-form-item>
                        </view>
                    </view>
                      
                </view>
                  
            </u--form>
        </view>
          
    </view>
</template>

<script setup>
import { useStore } from '@/store/index.js';
import { ref, reactive, onMounted, watch,defineProps } from 'vue';
import { onLoad, onReady, onShow } from '@dcloudio/uni-app';

import { storeAdd, storeUpdate,storeQueryById } from '@/api/proxy.js'
import {upload} from '@/api/index/index'
const FormData = require('../../../static/formdata.js')
import { fileUrl } from '@/utils/index.js'

const props = defineProps({
    storeId: {
        type: String,
        default: ''
    }
});
const store = useStore();
const form = ref({
    name: '',
    birthPlace: '',
    detailedAddress:'',
    repairPhone:'',
    image:[],
    chargeFee:'',
    serviceChargeList:[{
        startPower:'0',
        endPower:'',
        price:''
    }]
});
const uForm = ref(null);

onReady(() => {
    
})

onShow(() => {
    
})

onLoad(() => {
    getStoreQueryById();
})

const getStoreQueryById = () => {
    storeQueryById({storeId:props.storeId}).then(res => {
        console.log(res,'resssssss')
        if(res.code == 200) {
            res.data.image = res.data.image.split(',')
            res.data.birthPlace = res.data.birthPlace.join(' ')
            form.value = res.data
        }
    })
}


const getFileUrl = (url) => {
    return fileUrl(url)
}

const previewImage = (item) => {
    uni.previewImage({
        urls: [getFileUrl(item)]
    })
}

</script>

<style scoped lang="scss">
.store-detail {
    background: #F7F7F7;
    min-height:100vh;
    
    ::v-deep .u-form-item__body__right__message {
        margin-left:0!important;
    }
}
</style>
